Ayer Games me sugería un scroll "con flechitas" este que traigo a continuación lo vi en el blog de César, le hice algunas modificaciones y este es el resultado.
El siguiente código lo añadimos en Diseño/Añadir un gadget/HTML/Javascript
<script language="JavaScript1.2">
var speed=2
iens6=document.all||document.getElementById
ns4=document.layers
if (iens6)
{document.write
('<div id="container" style="position:relative;width:180px;height:240px;overflow:hidden;border:4px ridge #B0171F; ">')
<!--Modificar ancho,largo y borde del contenido-->
document.write('<div id="content" style="position:absolute;width:183px;left:2px;top:0px">')
}
</script>
<div style="background-color:#fff;width:185px;border:1px solid #B0171F;">
<!-- Color de fondo del contenido-->
<!--Enlaces- imágenes- contenido-->
<!--Enlaces- imágenes- contenido-->
</div>
<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
<!--En movedown escogemos velocidad-->
}
function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
<!--En moveup escogemos velocidad-->
}
function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}
function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}
function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
<!--Para añadir las imágenes de subir y bajar desde aquí;-->
<div style="background-color:#fff;width:185px;border:1px solid #B0171F;">
<!--En background añadimos color de fondo a la caja de imágenes -->
<center>
<a href="javascript:movedown()"><img src="url-imagen SUBIR"/></a> <a href="javascript:moveup()"><img src="url-imagen-BAJAR"/></a> <a href="javascript:stopscroll()"><img src="url-imagen-PAUSA"/></a> <a href="javascript:movetop()"><img src="url-imagen INICIO"/></a>
</center>
</div>
<!--Hasta aquí->
Para personalizarlo añadí unas líneas en negrita que sirven como orientación.
La barra de navegación es posible situarla en la parte superior o inferior del contenido,la solución está en "mover" al principio o final el código que se encuentra en el interior de estas dos líneas:
<!--Para añadir las imágenes de subir y bajar desde aquí;-->
código...
código...
código...
<!--Hasta aquí->
Está excelente la idea y el resultado
Besos
Perdón gem@ pero no veo en ningún lado de tu blog de pruebas el ejemplo funcionando de este scroll, el enlace que pones en la imagen lleva a tu blog de pruebas, pero o yo estoy mas tonta que de costumbre o esto no lo veo por ningún lado :o
Besoooo ;)
Suprimí el comentario anterior porque no me había subscripto :O
Gracias Alemamá me alegra verte por aquí ;)
K_nelita el ejemplo estaba al final de la sidebar (ya lo añadí al principio) :)
Estimada Gem@ ya va siendo hora de presentarme; mi nombre es Charlie, soy sevillano y te sigo desde hace más de un mes; he de decirte, que tu blog me recuerda mucho al bolso de Mary Popins que busques lo que busques en él, al final lo acabas encontrando; es encillamente fabuloso.
Gracias por toda la ayuda que me has prestado y las ideas que me has dado.
Te envío la dirección de mi blog; siéntete en él como en tu casa.
Un saludo, Charlie.
Gracias por este comentario tan simpático y por esa comparación que me hizo reír tanto.
Adoro los animales ¿lo sabías? y me ha encantado visitar tu blog.
Estoy segura que la persona que te cuida te quiere tanto que todo le parece poco para alguien tan adorable como tu.
Saludos ;)
Ahh, ahora si lo veo, pero hubiera jurado que ayer no estaba en la sidebar abajo ni en ningún otro lado de ese blog, o era muuuuuy tarde y tenía mucho sueñoooo (por no decir que estaba dormida sobre la pc) ja ja :D
Yo también andaba algo dormida, a saber que cosa fue jajajaja
Hola Geam, perdon es que tenia sacado para provar otros menú,pero todos me dan el mismo problema...
No entiendo Cristal :(
Hola Gem@! no entiendo muy bien cómo funciona esta caja. Lo que quiero hacer es poner algo así con mi blogroll porque se está haciendo interminable. Se puede? Puse la caja pero no sé cómo poner toda la lista de sitios dentro con sus iconos así tal cual están en mi blogroll.
Saludos!
Hola Graciela el lugar indicado para añadir ese listado es donde dice:
<!--Enlaces- imágenes- contenido-->
<!--Enlaces- imágenes- contenido-->
Lo que tienes en tu blog es la lista de blog de Blogger, la imagen del icono la añade el gadget de Blogger, lo que puedes hacer es añadirlo de esta forma :
(es un ejemplo con dos enlaces de tu listado)
<p><a href="http://www.mycine.com.ar/" target="_blank" title="MyCine"><img border="1" width="20" src="http://www.mycine.com.ar/favicon.ico" height="20"/>MyCine</a></p>
<p><a href="http://www.tecnogadgets.com" target="_blank" title="TecnoGadgets"><img border="1" width="20" src="http://www.tecnogadgets.com/favicon.ico" height="20"/>TecnoGadgets</a></p>
Cualquier cosa me avisas ;)
Hola Gem@! nah si hago eso uno por uno me vuelvo vieja, más aún jaja.
Quiero ponerlos como están nomás, con el icono de blogger, en realidad me interesa la caja con scroll pero lo demás que quede igual. Pero si no pongo el link del favicon, sale únicamente el título del blog. Entendí bien?
Besos
Así es Graciela entendiste bien, y si lo que deseas es ahorrar trabajo puedes copiar el contenido de tu blogroll es decir el contenido de "Lo que leo" para hacerlo ve a plantilla y busca:
<ul id='BlogList1_blogs'> unas líneas más abajo copia desde <div class='blog-title'> hasta el final de la lista que termina en:
<a href='http://abblogatry.blogspot.com/' target='_blank'>
BLA BLA BLOG</a>
</div>
Todo eso lo copias y pegas dentro de la cajita en el espacio para el contenido ;)
Gemit@ sacaste el enlace al blog de pruebas :(
Quería ver si puedo hacer esto, pero tengo que ponerle las imagenes de las flechitas yo, no?
Por lo que vi no vienen en el código... no hay problema, ya se de donde sacarlas, solo pregunto, pero el tamaño? Y el fondo donde van esas imagenes, las de las flechitas, y el borde de donde se cambia eso?
Y el fondo de la cajita, tiene que ser un color o puede ser una imagen?
Tampoco me queda muy claro como ponerle las imagenes, como si fueran botones, es otra cosa, pero imaginate que son botones, no son enlaces... bueno en realidad si, van a ser algo asi como botones que enlazan.
Ya te mareé?? :O
Estoy medio perdida :o
k_nelita quité ese enlace porque al ser un blog de pruebas lo mismo añado que elimino cosas :(
Pero yo te explico todo:
No dejé la url de los iconos porque son de color rojo y no sería del agrado de todos.
Donde dice:
<!--Para añadir las imágenes de subir y bajar desde aquí;-->
Justo debajo vienen los estilos de los iconos y el lugar donde van añadidos.
El tamaño del ejemplo son de 16x16.
Es fácil saber donde añadir los iconos, basta con buscar <img src="url-imagen SUBIR"/> y donde dice url-imagen SUBIR se añade la url de la imagen con la flechita hacia arriba, si es BAJAR la url de la flechita hacia abajo, con inicio y pausa más de lo mismo, añadimos la url del icono donde se supone que la imagen corresponde con la función que realiza.
Más cosas...
El fondo de los iconos es donde dice background-color:#fff;
El borde en border:1px solid #B0171F;
El fondo de la caja puede ser de color o con imagen, donde dice:
<!-- Color de fondo del contenido-->
Verás que justo arriba aparece:
background-color:#fff; (en color morado) si añadimos color lo dejamos como está sustituyendo #fff por otro color pero si es por una imagen donde dice:
background-color:#fff;
lo eliminamos y añadimos:
background:url('aquí la url de tu imagen de fondo');
Si te queda alguna duda más por aquí ando... ;)
No encuentro en mi plantilla los códigos de "blogs que leo" ni expandiendo ni sin expandir...S.O.S.
Graciela mira en el gadget de la sidebar, pero en la plantilla están porque yo lo veo en el código fuente :)
No Gem@, "lo que leo" es un widget, eso no aparece en la plantilla, aparece únicamente el título del widget que está agregado desde configuración.
Efectivamente, en el código fuente aparecen todos los links pero en la plantilla no. Los busqué con la función buscar de todas las formas posibles, y sólo aparece el título del widget pero no el resto.
Bueno, gracias de todos modos.
Un beso
Graciela si es un gadget y aparece en el código fuente también puedes copiarlo desde ahí.
Mira esto copialo en un elemento de página en html... aunque sea sólo por probar.
Disculpas por demorar en contestarte, estuve de viaje y en mi correo encontré tu truco de los favicones en vez del link y eso me parece mucho mejor, así que voy a probar con ése que me gusta más y parece ser más fácil.
Saludos y gracias por tu ayuda.
Ayyy qué despistada soy! entre tantos mails se me mezclaron los de ayuda jaja. Lo de los favicones no era tuyo, aclaro por si alguien te pregunta.
Mil disculpas!!!!
Besos
No te preocupes Graciela :
Nota: solo los miembros de este blog pueden publicar comentarios.